<template>
    <div class="main pro">
        <div class="pro_banner">
            <img :src="banners">
        </div>
        <div style="display:none"  ref="hide">{{$route.params.id}}</div>
        <div style="display:none" ref="cid">{{$route.params.cid}}</div>
        <div style="display:none" ref="sort">{{$route.params.sort}}</div>
        <el-row class="pro_bd" :gutter="20">
            <el-col :span="6" class="left">
                <div class="grid-content">
                    <ul>
                        <li v-show="no_sort">暂无分类</li>
                        <li v-bind:class="{'pass_active':lis.id==pro_detail.cid}" v-for="(lis,index) in sorts" :key="lis.sor" @click="active($event,index,lis.id)" :id="lis.id">
                            <router-link :to="{name:'product',params:{cid:lis.id}}"> {{lis.name}}</router-link>
                        </li>
                    </ul>
                    <p style="display:none">{{pro_detail.cid}}</p>
                </div>
            </el-col>

            <el-col :span="18">
                <div class="grid-content">
                    <!-- 右侧产品详情 开始 -->
                    <div class="right_box">
                        <!-- 顶部 产品信息开始 -->
                        <div class="pro_box">
                            <!-- 产品图轮播 bg -->
                            <div class="lunbo">
                                <el-carousel height="400px">
                                    <el-carousel-item v-for="img in pro_img" :key="img.pro_imgs">
                                        <img :src="img" class="lun_img">
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <!-- 产品图轮播 ed -->

                            <!-- 轮播侧边产品信息详情 bg -->
                            <div class="pro_detail">
                                <p v-title>{{pro_detail.title}}</p>
                                <p class="title">{{pro_detail.title}}</p>
                                <p class="summary">{{pro_detail.summary}}</p>
                                <p class="price">
                                    <span>产品单价: </span>
                                    <span>￥{{pro_detail.price}}</span>
                                </p>
                                <p class="brand">
                                    <span>品牌名称: </span><span>{{pro_detail.brand}}</span></p>
                                <p class="address">
                                    <span>生产地址: </span>
                                    <span>{{pro_detail.address}}</span>
                                </p>
                                <p class="make_company">
                                    <span>生产厂商: </span>
                                    <span>{{pro_detail.vendor}}</span>
                                </p>
                                <div class="btn_group">
                                    <el-button type="primary" size="large" @click="tels"><img src="../assets/tel.png" class="icon">电话咨询</el-button>
                                    <el-button type="primary" size="large" @click="say"><img src="../assets/huagongshuo.png" class="icon">说几句</el-button>
                                    <el-button type="primary" size="large" @click="downLoad" style="height:50px"><img src="../assets/checks.png" class="icon" style="vertical:middle;height:22px;width:22px">查看手册</el-button>
                                </div>
                            </div>
                            <!-- 轮播侧边产品信息详情 ed -->
                        </div>
                        <!-- 顶部 产品信息结束 -->
                        <!-- tab 切换开始 -->
                        <div class="tab">
                            <el-tabs v-model="activeName" @tab-click="handleClick">
                                <!-- 产品介绍 bg -->
                                <el-tab-pane label="产品介绍" name="product">
                                    <div v-html="pro_detail.content" class="pro_detail_S"></div>
                                </el-tab-pane>
                                <!-- 产品介绍 ed -->

                                <!-- 化工说问答 bg -->
                                <el-tab-pane label="化工说" name="chemical">
                                    <div class="chemical" v-if="pro_detail.question!=''">
                                        <div id="commentBox">
                                            <div v-for="list in question" :key="list.comments">
                                                <!-- 说 -->
                                                <div class="comment" :class="{'line_bt':list.anwser_list==undefined}">
                                                    <div class="avtar">
                                                        <img :src="list.avatar" width="36" height="36" class="avtar_img">
                                                        <img src="../assets/shuo.png" class="talk">
                                                    </div>
                                                    <div class="comment-content">
                                                        <p class="avtar-name">
                                                            <span>{{list.username}}</span>
                                                        </p>
                                                        <div class="comments">
                                                            <viewer :images="images">
                                                                <img :src="coment_img" :key="coment_img" v-for="(coment_img,index) in list.pics" @click="img(coment_img,$event)">
                                                            </viewer>
                                                            <p class="comments_bd">{{list.title}}</p>
                                                            <!-- <p>{{coment_img}}</p> -->
                                                        </div>

                                                        <p class="comment-time">
                                                            <span>{{list.ctime}}</span> ·
                                                            <span class="join_talk" v-if="list.anwser_list==undefined">加入讨论</span>
                                                            <span class="join_talk" v-if="list.comment_total!=0" :class="{'check_talk':list.comment_total!=0}" @click="check_talk(list.id)">{{list.comment_total}}讨论</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <!-- 说 结束 -->                                               
                                            </div>
                                        </div>
                                        <div class="check_more" @click="more()" :class="{'disabled':nomore}" ref="more">查看更多</div>
                                    </div>
                                    <div v-else>暂无数据</div>
                                </el-tab-pane>
                                <!-- 化工说问答 ed -->

                                <!--企业动态 bg -->
                                <el-tab-pane label="动态" name="news">
                                    <div class="pro_news" v-if="pro_detail.article!=''">
                                        <el-row>
                                            <el-col :span="24" v-for="txt in pro_detail.article" :key="txt.new" class="news_item_box">
                                                <div class="grid-content bg-purple-light news_item">
                                                    <!-- <router-link to="/news_artical/7"> -->
                                                    <router-link :to="{ name: 'news_artical', params: { id: txt.id}}">
                                                        <!-- <router-link :to="{path:'news_artical',query: {id:txt.id}}"> -->
                                                        <div class="news_img">
                                                            <img :src="txt.cover[0]">
                                                        </div>
                                                        <div class="news_txt">
                                                            <p class="news_tle">{{txt.title}}</p>
                                                            <p class="news_body">{{txt.abstract}}</p>
                                                            <p class="news_time">
                                                                <span>{{txt.author_name}}</span>
                                                                <span>{{txt.create_time}}</span>
                                                            </p>
                                                        </div>
                                                    </router-link>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div v-else>暂无数据</div>
                                </el-tab-pane>
                                <!--企业动态 ed -->

                                <!--企业视频 bg -->
                                <el-tab-pane label="视频" name="video">
                                    <div v-if="pro_detail.video!=''">
                                        <el-row :gutter="20">
                                            <el-col :span="12" class="video_box" v-for="video_list in pro_detail.video" :key="video_list.videos">

                                                <div class="grid-content list_cont">
                                                    <div class="video_cover">
                                                        <router-link :to="{name:'video_detail',params: {id:video_list.id}}">
                                                            <img :src="video_list.cover">
                                                            <div class="covers">
                                                                <img src="../assets/video.png" class="icon_video">
                                                            </div>
                                                            <div class="desc">
                                                                <p class="desc_title">{{video_list.title}}</p>

                                                            </div>
                                                        </router-link>
                                                    </div>

                                                </div>

                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div v-else>暂无数据</div>
                                </el-tab-pane>
                                <!--企业动态 ed -->
                            </el-tabs>

                        </div>
                        <!-- tab 切换结束 -->
                    </div>
                    <!-- 右侧产品详情结束 -->
                </div>
            </el-col>
        </el-row>

        <div id="model"  v-if="showModel">
            <div tabindex="-1" class="el-message-box__wrapper" style="z-index: 2051;">
                <div class="el-message-box">
                    <div class="el-message-box__header">
                        <div class="el-message-box__title">查看讨论</div>
                        <button type="button" aria-label="Close" class="el-message-box__headerbtn" @click="close">
                            <i class="el-message-box__close el-icon-close"></i>
                        </button>
                    </div>
                    <div class="el-message-box__content">
                        <!-- <div v-for="list in newQuestion" :key="list.comments" v-if="anwsers!=undefined"> -->
                            <div class="replay" >
                                <div v-for="(anwser,key) in anwsers.data" :key="anwser.items" class="replay_item">
                                    <div class="comment">
                                        <div class="avtar">
                                            <img :src="anwser.useravatar" width="36" height="36" class="avtar_img">
                                            <img src="../assets/talk.png" class="talk">
                                        </div>
                                        <div class="comment-content">
                                            <p class="avtar-name">
                                                <span>{{anwser.username}}</span>
                                            </p>
                                            <div class="comments">
                                                <viewer :images="images" class="img">
                                                    <img :src="coment_img" :key="coment_img" v-for="(coment_img,index) in anwser.pics" @click="img(coment_img,$event)">
                                                </viewer>
                                                <p class="comments_bd">{{anwser.content}}</p>
                                            </div>

                                            <p class="comment-time">
                                                <span>{{anwser.ctime}}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                               
                                <!-- 论 分页 开始-->
                                <!-- v-if="list.anwser_list.length>=3" -->
                                <div class="lunPage"  v-if="anwsers.total>=3">
                                    <!-- <p>{{anwser.id}}</p> -->
                                    <el-pagination small @current-change="pageIndexChange" :page-size="4" :current-page="current_page" layout="prev, pager, next" :total="anwsers.total" :data-number="nextPage.total">
                                    </el-pagination>
                                </div>

                                <!-- 论 分页 结束-->
                            </div>
                        <!-- </div> -->
                    </div>

                </div>
            </div>
        </div>

        <div class="v-modal"  :class="{'showmodel':showModel,'hideModel':!showModel}" style="z-index: 2050;"></div>

        <div id="show_guide" style="display:none">
            <div class="guide_box">
                <el-carousel :interval="5000" arrow="always">
                  <el-carousel-item v-for="items in check_img" :key="items">
                  
                    <img :src="items">
                  </el-carousel-item>
                </el-carousel>
                <img src="../assets/close2.png" class="guide_close" @click="close_guide">
            </div>
        </div>

    </div>
</template>

<script>
var page = 1;
export default {
  name: "app",
  data() {
    return {
      page: 1,
      current_page: 1,
      question: [],
      pro_detail: [],
      anwser_list: [],
      pro_list: [],
      banners: [],
      anwser_id: [],
      pro_img: [],
      sorts: [],
      activeName: "product",
      id: "",
      images: [],
      item: [],
      newQuestion: [],
      nomore: false,
      nextPage: [],
      showModel: false,
      anwsers: [],
      pics: [],
      coment_img: [],
      com_id: localStorage.getItem("companyid"),
      no_sort: false,
      down: [],
      phone: [],
      check_img:[]
    };
  },
  directives: {
    title: {
      componentUpdated: function(el, binding) {
        document.title = el.innerText;
        el.remove();
      }
    }
  },
  methods: {
    tels: function() {
      this.$alert(this.phone, "咨询电话", {
        confirmButtonText: "确定"
      });
    },
    say: function() {
      var self = this;
      this.$alert("请下载'天化云'注册后在app中发言", "说几句", {
        confirmButtonText: "确定",
        callback: function() {
          window.open("http://app.tianhuayun.net/index.php/api/share/down");
        }
      });
    },
    downLoad: function() {      
      // this.$nextTick(function () {
       
      // })
      this.check_img=[];
      if (this.down == 0 || this.down == "") {
        this.$alert("该产品还未发布手册", "查看手册", {
          confirmButtonText: "确定"
        });
      }else{
        
        for(var i=0;i<this.down.length;i++){
           this.check_img.push(this.down[i])
        }
          var down0=this.down[0];
          var file_type=down0.substr(down0.lastIndexOf(".")).toLowerCase();//获得文件后缀名
          //alert(file_type);
          if(file_type=='.jpg' || file_type=='.png' ||file_type=='.jpeg' || file_type=='.gif'){
              $('#show_guide').show();
          }else if(file_type=='pdf'){
            window.open(this.down)
          }          
      }
    },
    close_guide:function(){
      $('#show_guide').hide();
    },
    more: function() {
      page++;
      var id = this.$refs.hide.innerHTML;
      this.$http
        .get(
          "http://thy.588net.com/index.php/question/Question/getPostList?" +
            "&product_id=" +
            id +
            "&page_size=" +
            3 +
            "&page=" +
            page
        )
        .then(function(res) {
          if (res.body.data.length == 0) {
            //alert('空')
            this.nomore = true;
            this.$refs.more.innerHTML = "已无更多讨论";
            return false;
          } else {
            //alert('不空')
            var questions = res.body.data;
            this.question = this.question.concat(questions);
          }
        });
    },
    loadDetail: function() {
      //this.sb=this.$refs.sort.innerText
      var id = this.$refs.hide.innerHTML;
      this.id = this.$refs.hide.innerHTML;
      var cid = this.$refs.cid.innerHTML;
      // console.log(typeof(this.sb))
      this.$http
        .get(
          "http://thy.588net.com/index.php/mall/Product/getDetail?" + "id=" +id +"&company_id=" + this.com_id
        )
        .then(function(res) {
          this.pro_detail = res.body.data;
          this.down = res.body.data.book;
          this.phone = res.body.data.company.mobile;
          this.pro_img = res.body.data.pics;
          this.banners = res.body.data.company.product_banner;

        });
    },
    loadProlist: function() {
      window.scrollTo(0, 0);
      var id = this.id;
      this.$http
        .get(
          "http://thy.588net.com/index.php/mall/product/getProductList?" +
            "&company_id=" +
            this.com_id +
            "&page_size=" +
            8 +
            "&page=" +
            page +
            "&id=" +
            id
        )
        .then(function(res) {
          this.pro_list = res.body.data;
        });
    },
    loadSort: function() {
      var cid = this.$refs.cid.innerHTML;
      this.$http
        .get("http://thy.588net.com/index.php/mall/product/get_product_cate?"+ 'company_id=' + this.com_id)
        .then(function(res) {
          this.sorts = res.body.data;
          if (res.body.data == "" || res.body.data == null) {
            this.no_sort = true;
          } else {
            this.no_sort = false;
          }
        });
    },
    loadQuestion: function() {
      var id = this.$refs.hide.innerHTML;
      var page = this.current_page;
      this.$http
        .get(
          "http://thy.588net.com/index.php/question/Question/getPostList?" +
            "&product_id=" +
            id +
            "&page_size=" +
            3 +
            "&page=" +
            page
        )
        .then(function(res) {
          var question = res.body.data;
          this.question = res.body.data;
        });
    },
    loadAnwser: function(q_id, val) {
      this.q_id = q_id;
      var page = 1;
      //查看讨论 点击
      if (val == undefined) {
        this.$http
          .get(
            "http://thy.588net.com/index.php/question/question_answer/getAnswerList?" +
              "&company_id=" +
              this.com_id +
              "&page_size=" +
              4 +
              "&page=" +
              page +
              "&id=" +
              q_id +
              "&is_web=" +
              1
          )
          .then(function(res) {
            //console.log(res.body.data)
            this.anwsers = res.body.data;
          });
      } else {
        //切换page
        this.$http
          .get(
            "http://thy.588net.com/index.php/question/question_answer/getAnswerList?" +
              "&company_id=" +
              this.com_id +
              "&page_size=" +
              4 +
              "&page=" +
              val +
              "&id=" +
              q_id +
              "&is_web=" +
              1
          )
          .then(function(res) {
            //console.log(res.body.data)
            this.anwsers = res.body.data;
          });
      }
    },
    active(event, index, id) {
      //event 当前对象  index 为遍历条目索引  id为遍历条目id;
      page = 1;
      this.id = id; //更新id值
    },
    pageIndexChange: function(val) {
      this.current_page = val;
      this.loadAnwser(this.q_id, val);
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    check_talk: function(q_id) {
      this.showModel = true;
      this.loadAnwser(q_id);
      // console.log(this.coment_img)
    },
    close: function() {
      this.showModel = false;
    },
    img: function(img, event) {
      this.pics = img.replace("/thumb/", "/");
      event.currentTarget.src = this.pics;
    },
    tele: function() {
      this.$alert("400100123456", "咨询电话", {
        confirmButtonText: "确定"
      });
    },
    online: function() {
      this.$alert("正在建设中", "", {
        confirmButtonText: "确定"
      });
    }
  },
  mounted() {
  var self=this;
        setTimeout(function(){
            var com_id=localStorage.getItem("companyid");
            self.com_id=com_id;
            self.loadSort();
            self.loadDetail();
           
  },400)  
  
  this.loadQuestion();
  
  this.id = this.$refs.hide.innerHTML;
  },
  activated: function() {
     $(".is-active").removeClass("is-active");
    $(".intro_pro").addClass("is-active");
    this.id = this.$refs.hide.innerHTML;
    this.loadQuestion();
    this.loadDetail();
    this.loadSort();
  }
};
</script>

<style>
.guide_box .el-carousel__container{
  height:600px
}
.pro_detail_S p {
  width: 100%;
  line-height: 28px;
  font-size: 16px;
  color: #5a5a5a;
}
.pro_detail_S video{
  width:80%;
  height: 400px;
  margin: 20px auto;
}
.pro_detail_S p img {
  display: block;
  height: auto !important;
  width: 100%;
  margin: 20px 0;
}

.el-tabs__content {
  min-height: 150px;
}


</style>



<style scoped>
.guide_close{
  cursor: pointer;
  position: absolute;
  width:32px;
  height: 32px;
  right: -16px;
  top:-16px;
  z-index: 99999;
}



.guide_box .el-carousel__item{
  height: 600px;
  width:100%;
}

.guide_box .el-carousel__item img{
  width:100%;
  height:600px
}

.guide_box{
  width:700px;
  height:600px;
  background:#fff;
  position: relative;
}
#show_guide{
  z-index: 9999;
			    background-color: rgba(0,0,0,.6);
			    position: fixed;
			   top: 0;
          bottom: 0;
          left: 0;
          right: 0;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    -webkit-box-pack: center;
			    -webkit-justify-content: center;
			    justify-content: center;
			    -webkit-box-align: center;
			    -webkit-align-items: center;
			    align-items: center;
			    height: 100%;
			    width: 100%;
}
.lun_img {
  height: 400px;
  width: 100%;
}
.hideModel {
  display: none;
}
.showmodel {
  display: block;
}

.el-message-box {
  width: 700px;
  height: 600px;
  overflow: auto;
}
.check_talk {
  cursor: pointer;
}
.disabled {
  color: #e4e4e4 !important;
  background-color: #fff;
  cursor: not-allowed !important;
}

.comment-time .join_talk {
  display: none;
}

.comment-time .join_talk:last-of-type {
  display: inline-block;
}

.lunPage {
  text-align: center;
}

.lunPage .el-pagination {
  white-space: nowrap;
  padding: 14.5px 0;
  color: #48576a;
}

.lunPage.active {
  border-color: none;
  background-color: #f5f5f5 !important;
  border-radius: 100% !important;
  color: #2277ff;
  cursor: default;
  font-weight: bolder;
}

.el-pager li.active {
  border-color: none;
  background-color: #f5f5f5 !important;
  border-radius: 100% !important;
  color: #2277ff;
  cursor: default;
  font-weight: bolder;
}

/* .el-pagination--small .el-pager li {
    border-radius: 100%!important;
} */

.pass_active {
  background: #2277ff;
  color: #fff;
}

.pass_active a {
  color: #fff;
}

.replay .replay_item {
  border-bottom: 1px solid #d8d8d8;
}

.replay .replay_item:last-of-type {
  border-bottom: 0px solid #fff;
}

/* .replay .comment:nth-last-of-type(1){
    border-bottom:0px solid #d8d8d8
} */

.check_more {
  height: 50px;
  line-height: 50px;
  background: #fff;
  text-align: center;
  color: #5a5a5a;
  border: 1px solid #d8d8d8;
  cursor: pointer;
  margin: 15px 0;
  /* width:100%; */
  /* position: absolute; */
  z-index: 9999;
}

li a {
  display: block;
  color: #5a5a5a;
}

.replay {
  clear: both;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}

.replay .comment {
  padding: 15px;
}

.replay .comment {
  border-top: 0px solid #d8d8d8;
}

.icon {
  vertical-align: middle;
  width: 26px;
  margin-right: 3px;
  height: 26px;
}

.btn_group .el-button:nth-of-type(1) {
  background: #e63d3d;
}

.btn_group .el-button:nth-of-type(2) {
  background: #2978ff;
}

.icon:nth-of-type(3) {
  background: #ff9845;
}

.join_talk {
  background: #f5f5f5;
  border-radius: 8px;
  display: inline-block;
  height: ;
  padding: 0px 10px;
  color: #5a5a5a;
}

.comments_bd {
  height: 30px;
  line-height: 30px;
  clear: both;
}

.avtar {
  margin-right: 10px;
  width: 36px;
}

.line_bt {
  border-bottom: 1px solid #d8d8d8;
}

.comment {
  /* border-top: 1px solid #d8d8d8; */
  color: #5a5a5a;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  overflow: hidden;
  padding: 10px;
}

.avtar_img {
  width: 36px;
  height: 36px;
  border-radius: 18px;
}

.talk {
  width: 20px;
  height: 20px;
  float: right;
}

.comment-content {
  width: 100%;
}

.avtar-name {
  height: 36px;
  line-height: 36px;
  font-size: 12px;

  overflow: hidden;
  color: #5a5a5a;
}

.avtar-name span:nth-of-type(1) {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
}

.comments {
  text-align: justify;
  font-size: 14px;
  line-height: 24px;
  color: #5a5a5a;
  overflow: hidden;
}

.comments img {
  width: 80px;
  height: 80px;
  padding: 4px;
  margin-right: 10px;
  box-shadow: 0px 0px 2px 0px #d8d8d8 inset;
}

.comment-time {
  font-size: 12px;
  color: #5a5a5a;
  /* margin-top: 6px; */
  height: 1rem;
  line-height: 20px;
}

.desc_title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #5a5a5a;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.video_cover {
  width: 100%;
  position: relative;
}

.video {
  clear: both;
  overflow: hidden;
  background: #fff;
  padding: 0 20px;
  margin-top: 20px;
  border-bottom: 2px solid #d8d8d8;
}

.video_box {
  /* padding: 0 20px!important */
  margin-bottom: 20px;
}

/* .video_box:nth-last-of-type(2){
    margin-bottom: 0px;
} */
.video_box:nth-last-of-type(1){
    margin-bottom: 0px;
}

/* .video_box:nth-last-of-type(n-2){
  margin-bottom: 0px;
} */

.list_cont {
  /* border: 1px solid #d8d8d8;
    border-radius: 8px; */
  overflow: hidden;
}

.desc_summary {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  padding-bottom: 14px;
  line-height: 40px;
  height: 40px;
  width: 100%;
  color: #7d7c7c;
  -webkit-line-clamp: 3;
}

.icon_video {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-animation: play 2s linear 0s infinite alternate;
  animation: play 2s linear 0s infinite alternate;
}

.el-icon-d-arrow-right {
  margin-left: 5px;
}

@-webkit-keyframes play {
  0% {
    -webkit-transform: scale(1);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes play {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.video_cover > a > img {
  display: block;
  width: 100%;
  height: 250px;
}

.covers {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.news_item_box {
  /* padding-right: 30px; */
  border-bottom: 1px solid #d8d8d8;
  padding: 10px 0;
}

.news_item {
  overflow: hidden;

  height: 150px;

  background: #fff !important;
  cursor: pointer;
  /* box-sizing: content-box; */
}

/* .news_item_box:nth-last-of-type(1){border-bottom:0px solid #fff;padding-bottom:0} */

.news_item_box:nth-of-type(even) {
  padding-right: 0;
}

.news_item .news_img {
  float: left;
  margin-right: 20px;
  overflow: hidden;
}

.news_item .news_img img {
  vertical-align: bottom;
  height: 150px;
  width: 250px;
  transition: all ease 0.8s;
}

.news_item .news_img img:hover {
  transform: scale(1.1);
}

.news_txt {
  /* display: flex;
    flex-direction: column; */
  height: 150px;
  background: #fff;
  /* padding: 10px 0; */
}

.news_txt p {
  margin: 0;
}

.news_txt .news_tle {
  font-size: 18px;
  color: #5a5a5a;
  height: 40px;
  /* line-height: 40px; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.news_txt .news_body {
  height: 90px !important;
  font-size: 14px;
  color: #5a5a5a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 26px;
  overflow: hidden;
}

.news_time {
  height: 20px;
  font-size: 14px;
  color: #a5a5a5;
}

.news_time span:nth-of-type(1) {
  margin-right: 20px;
}

.pro_bd {
  margin-top: 20px;
}

.tab {
  padding: 20px;
  background: #fff;
  margin-top: 20px;
  /* padding-bottom: 0; */
  margin-bottom: 3px;
  box-shadow: 0px 0px 6px 0px #d8d8d8;
}

.summary {
  font-size: 14px;
  color: #a5a5a5;
  line-height: 24px;
}

.title {
  font-size: 18px !important;
  color: #5a5a5a !important;
}

.grid-content {
}

.price span:nth-of-type(2) {
  color: #a5a5a5;
}

.lunbo {
  height: 400px;
  width: 400px;
  float: left;
  /* margin-right: 20px */
}

.pro_box {
  box-shadow: 0px 0px 6px 0 #d8d8d8;
  background: #fff;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left_active {
  background: #2277ff;
  color: #fff !important;
}

.left_active a {
  color: #fff;
}

.pro_detail {
  width: 50%;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.left .grid-content {
  box-shadow: 0px 0px 6px 0px #d8d8d8;
}
.left ul {
  background: #fff;
}

.left ul li {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  color: #5a5a5a;
  cursor: pointer;
}

.pro_banner {
  width: 1200px;
  margin: 0 auto;
  height: 200px;
}

.pro_banner img {
  width: 100%;
  height: 200px;
}

/* .slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    color:#000!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} */

.slider {
  width: 1000px;
  margin: 50px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.main {
  max-width: 1200px;
  margin: 0 auto;
  /* overflow: hidden; */
}

.pro_desc {
  margin: 20px 0;
}

.bg-purple img {
  width: 100%;
  height: 150px;
}

.pro_intro > h3 {
  height: 60px;
  line-height: 60px;
  margin-bottom: 20px;
}

/* .pro p img {
    width: 300px!important;
    height: 250px!important;
} */

.pro_img {
  margin: 20px 0;
}

.pro_name {
  height: 30px;
  line-height: 30px;
}

.pro_price {
  height: 30px;
  line-height: 30px;
}

.pro_price span {
  color: #ff0000;
}

.ask {
  margin: 10px 0;
}

.el-row {
  /* margin-bottom: 20px; */
  &:last-child {
    margin-bottom: 0;
  }
}

/* .el-col {
    border-radius: 4px;
} */

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  /* border-radius: 4px; */
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.pro_img {
  margin-bottom: 20px;
}

.pro_img .el-col-6 {
  width: 23%;
  margin-right: 2.6666%;
}

.pro_img .el-col-6:nth-of-type(4n) {
  margin-right: 0;
}

.pro_img .el-col-12:nth-of-type(even) {
  margin-right: 0;
}

.pro_right {
  background: #fff;
  padding: 2.666%;
  padding-bottom: 0;
  box-shadow: 0 0 12px -1px #d8d8d8 inset;
}

.pro_list {
  /* padding: 20px 0; */
  /* background: #fff; */
  margin-bottom: 20px;
}

.pro_item {
  border-radius: 6px;
  /* border: 1px solid #d8d8d8; */
  /* margin-bottom: 20px */
}

.pro_item_img img {
  width: 100%;
  height: 200px;
  transition: all ease 0.8s;
}

.pro_item_img {
  overflow: hidden;
  width: 100%;
  height: 200px;
}

.pro_item_img img:hover {
  transform: scale(1.2);
}

.pro_item_desc p {
  margin: 0;
}

.pro_title {
  /* height: 50px; */
  line-height: 20px;
  font-size: 14px;
  color: #5a5a5a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 5px 0 !important;
}

.pro_desc {
  height: 20px;
  font-size: 14px;
  color: #a5a5a5;
}
</style>
